<template>
  <div class="order">
    <div class="header">
      <homeHeader></homeHeader>
    </div>
    <div class="step">
      <ordersteps :activeindex="activeindex"></ordersteps>
    </div>

    <!-- 倒计时------------------------------------------------------- -->
    <div class="order-time">
      <div class="time-left">
        <img
          src=""
          alt=""
        />
      </div>
      <div class="time-right">
        <div class="daojishi">
          <span>请在</span>
          <span class="fen">{{ minutes }}</span>
          <span>分钟</span>
          <span class="miao">{{ seconds }}</span>
          <span>秒内完成支付</span>
        </div>

        <div class="tips">
          超时订单会自动取消，如遇支付问题，请致电猫眼客服：1010-5335
        </div>
      </div>
    </div>
    <!-- 小提示----------------------------------------------- -->
    <div class="xinxi">
      <span><i class="el-icon-warning-outline"></i></span>
      <span class="chang">请仔细核对场次信息，出票后将</span>
      <span class="tui">无法退票和改签</span>
    </div>

    <!-- 表单------------------------------------------------------ -->
    <div class="or-from">
      <div class="from-top">
        <div>影片</div>
        <div>时间</div>
        <div>影院</div>
        <div>座位</div>
      </div>
      <div class="from-bottom">
        <div>《紧急救援》</div>
        <div class="time">今天 12月22日 15:30</div>
        <div>璇宫国际影城（江汉路店）</div>
        <div>
          <span class="ting">6号激光厅-按摩椅厅</span>
          <span>3</span>
          <span class="num">排</span>
          <span>5</span>
          <span class="num">座</span>
        </div>
      </div>

      <div class="from-bottom">
        <div>《紧急救援》</div>
        <div class="time">今天 12月22日 15:30</div>
        <div>璇宫国际影城（江汉路店）</div>
        <div>
          <span class="ting">6号激光厅-按摩椅厅</span>
          <span>3</span>
          <span class="num">排</span>
          <span>5</span>
          <span class="num">座</span>
        </div>
      </div>

      <div class="from-bottom">
        <div>《紧急救援》</div>
        <div class="time">今天 12月22日 15:30</div>
        <div>璇宫国际影城（江汉路店）</div>
        <div>
          <span class="ting">6号激光厅-按摩椅厅</span>
          <span>3</span>
          <span class="num">排</span>
          <span>5</span>
          <span class="num">座</span>
        </div>
      </div>
    </div>

    <!-- 实际支付---------------------------------- -->
    <div class="pay">
      <span class="zi">实际支付:</span>
      <span class="qian">￥</span>
      <span class="price">33</span>
    </div>

    <!-- 确认支付按钮----------------------------------------------- -->
    <div class="queren"><button>确认支付</button></div>
    <homeFooter></homeFooter>
  </div>
</template>
<script>
import homeHeader from "../components/home/header";
import homeFooter from "../components/home/homefooter";
import ordersteps from "../components/xseats/Steps";
export default {
  data() {
    return {
      activeindex: 3,
      minutes: 14,
      seconds: 59,
      endtime: Date.parse(new Date()) / 1000 + 14 * 60, // 订单获取结束时的时间戳
    };
  },
  mounted() {
    this.add();
  },
  components: {
    homeHeader,
    homeFooter,
    ordersteps,
  },
  methods: {
    num(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    add() {
      var _this = this;
      var time = window.setInterval(function () {
        let nowtime = Date.parse(new Date()) / 1000;
        // console.log(nowtime, _this.endtime);
        if (_this.endtime > nowtime) {
          _this.minutes = parseInt((_this.endtime - nowtime) / 60);
          _this.seconds = (_this.endtime - nowtime) % 60;
        } else {
          _this.minutes = 0;
          _this.seconds = 0;
          clearInterval(time);
        }
      }, 1000);
    },
  },
  watch: {
    second: {
      handler(newVal) {
        this.num(newVal);
      },
    },
    minute: {
      handler(newVal) {
        this.num(newVal);
      },
    },
  },
  computed: {
    second: function () {
      return this.num(this.seconds);
    },
    minute: function () {
      return this.num(this.minutes);
    },
  },
};
</script>
<style scoped lang="scss">
.step {
  margin: 40px 0;
}
.order {
  width: 100%;
  overflow: hidden;

  .header {
    width: 100%;
    height: 80px;
    background: pink;
  }

  .order-time {
    width: 1200px;
    height: 110px;
    background: #fff3f3;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 20px;

    .time-left {
      width: 65px;
      height: 110px;
      float: left;
      //   background: purple;
      overflow: hidden;

      img {
        width: 35px;
        height: 41px;
        margin-top: 32px;
        margin-left: 25px;
      }
    }
    .time-right {
      width: 1135px;
      height: 110px;
      float: left;
      //   background: bisque;
      overflow: hidden;

      .daojishi {
        width: 1135px;
        height: 50px;
        font-size: 16px;
        color: #666;
        margin-bottom: 4px;
        margin-left: 20px;
        margin-top: 20px;
        .fen {
          font-size: 32px;
          color: #f03d37;
          margin-left: 6px;
          margin-right: 6px;
        }
        .miao {
          font-size: 32px;
          color: #f03d37;
          margin-left: 6px;
          margin-right: 6px;
        }
      }

      .tips {
        width: 1135px;
        height: 50px;
        font-size: 14px;
        color: #f03d37;
        margin-left: 20px;
      }
    }
  }
}

.xinxi {
  width: 1200px;
  height: 16px;
  margin: 0 auto;
  margin-bottom: 8px;
  .chang {
    font-size: 12px;
    color: #666;
    margin-left: 8px;
  }

  .tui {
    font-size: 12px;
    color: #faaf00;
  }
}

// 表单-----------------------------------------
.or-from {
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #e5e5e5;

  .from-top {
    width: 1200px;
    height: 48px;
    background: #f7f7f7;
    div {
      width: 300px;
      height: 48px;
      float: left;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #333;
      font-weight: 400;
    }
  }
  .from-bottom {
    width: 1200px;
    height: 62px;
    // background: pink;
    .ting {
      font-size: 14px;
      color: #424242;
      font-weight: 700;
      margin-right: 10px;
    }
    .num {
      font-size: 12px;
      margin-right: 2px;
      margin-left: 2px;
    }

    .time {
      color: #f03d37;
      font-size: 14px;
    }

    div {
      width: 300px;
      height: 62px;
      float: left;
      text-align: center;
      line-height: 62px;
      font-size: 16px;
      color: #333;
      font-weight: 400;
    }
  }
}

.pay {
  width: 1200px;
  height: 48px;
  margin: 0 auto;
  margin-top: 50px;
  text-align: right;

  .zi {
    font-size: 14px;
    color: #333;
    margin-right: 5px;
  }
  .qian {
    font-size: 24px;
    color: #f03d37;
  }
  .price {
    font-size: 36px;
    color: #f03d37;
  }
}

.queren {
  width: 1200px;
  height: 42px;
  margin: 0 auto;
  text-align: right;
  margin-top: 20px;
  margin-bottom: 90px;

  button {
    color: #fff;
    cursor: pointer;
    width: 190px;
    height: 42px;
    background: #f03d37;
    text-align: center;
    line-height: 42px;
    border: 0;
    outline: none;
    border-radius: 20px;
    box-shadow: 0 2px 10px -2px #f03d37;
  }
}
</style>